{% extends "public/layout.html" %}

{% block breadcrumb %}
     <ol class="breadcrumb">
        <li>
            <a href="{% url 'index' %}">首页</a>
        </li>
         <li>
             <a>资源管理</a>
         </li>
        <li class="active">
            <strong>业务线管理</strong>
         </li>
        <li>
            <a href="{% url 'product_add' %}" class="btn btn-primary btn-sm header-btn">增加业务线</a>
        </li>
    </ol>
{% endblock %}


{% block css %}
    <link rel="stylesheet" href="/static/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <style>
        .ztree * {padding:0; margin:0; font-size:14px;line-height:16px;}
        #product_info{padding-bottom: 25px;}
        #modify{width:100%;height:100%;display: none}
        .controls{display: none;}
        #infomatioin{width:100%;height: 100%;display: none}
        #infomatioin ul li{line-height: 45px;font-size: 16px;}
        #infomatioin ul li label{display: inline-block;width:100px;text-align: right;font-weight: bold;margin-right:25px;}
        #infomatioin ul li button{margin-left:125px;}
        #hostlist{display: none;border-top: 1px solid rgba(255, 255, 255, 0.3);padding-top:10px;}
        #hostlist li{margin-right:10px;min-width:200px;}
        .header-btn{margin-left: 20px;}
    </style>


{% endblock %}



{% block body %}

    <div id="content-body">
        <!--业务线树结构-->
        <div class="col-xs-3">
           <ul id="treeDemo" class="ztree"></ul>
        </div>
      
       <!--业务线详情部分-->
       <div class="col-xs-9">
            <div class="row" id="product_info">
                <!--一二级业务线的具体信息--> 
                <div id="infomatioin">
                    <ul class="list-unstyled">
                        <li><label>分类名：</label><span id="info_name"></span></li>
                        <li><label>上级分类：</label><span id="info_pid"></span></li>
                        <li><label>字母简称：</label><span id="info_module_letter"></span></li>
                        <li><label>业务负责人：</label><span id="info_dev_interface"></span></li>
                        <li><label>运维负责人：</label><span id="info_op_interface"></span></li>
                        <li>
                            <button class="btn btn-primary" id="info_modify_btn">修改</button>
                        </li>
                    </ul>
                </div>
                
                <!--一二级业务线的更新信息--> 
                <div id="modify">
                    <form class="form-horizontal" role="form" parsley-validate id="basicvalidations" method="post">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">分类名 *</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="name" autocomplete="off" id="input_name" parsley-trigger="change" parsley-required="true" parsley-minlength="2" parsley-validation-minlength="1">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">上级分类 *</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" readonly autocomplete="off" id="input_pid" parsley-trigger="change" parsley-required="true" parsley-minlength="2" parsley-validation-minlength="1">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">字母简称 *</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="module_letter" autocomplete="off" id="input_module_letter" parsley-trigger="change" parsley-required="true" parsley-minlength="2" parsley-validation-minlength="1">
                            </div>
                        </div>
                         <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">业务负责人 *</label>
                            <div class="col-sm-8">
                                <select data-placeholder="" multiple="选择联系人" tabindex="3" name="dev_interface" id="input_dev_interface" class="chosen-select form-control chosen-transparent">

                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="input_op_interface" class="col-sm-2 control-label">运维负责人 *</label>
                            <div class="col-sm-8">
                                <select data-placeholder="" multiple="选择联系人" tabindex="3" name="op_interface" id="input_op_interface" class="chosen-select form-control chosen-transparent">

                                </select>
                            </div>
                        </div>
                        <div class="form-group form-footer">
                            <div class="col-sm-offset-4 col-sm-8">
                                <button type="submit" id="submit_modify" class="btn btn-primary">提交</button>
                                <button id="return_info" class="btn btn-default">返回</button>
                            </div>
                        </div>
                    </form>
                </div>
                 <!--ztree 节点展开显示的地方-->
                <div class="clear"></div>
            </div>



            <!--主机列表-->
            <div class="row">
                <ul class="list-inline" id="hostlist">
                </ul>
            </div>
        </div>
        <div class="clear"></div>


    </div>
{% endblock %}


{% block js %}
    <script type="text/javascript" src="/static/zTree_v3-master/js/jquery.ztree.core.js"></script>

    <script>

        var data;    // 获取某个业务线的信息，全局变量
        var users=false;
        /*展示业务线信息*/
        var infomatioin_div = $("#infomatioin");
        var info_name = $("#info_name");
        var info_pid = $("#info_pid");
        var info_module_letter = $("#info_module_letter");
        var info_dev_interface = $("#info_dev_interface");
        var info_op_interface = $("#info_op_interface");
        var info_modify_btn = $("#info_modify_btn");

        /*修改业务线信息*/
        var modify_div = $("#modify");
        var input_name = $("#input_name");
        var input_pid = $("#input_pid");
        var input_module_letter = $("#input_module_letter");
        var input_dev_interface = $("#input_dev_interface");
        var input_op_interface = $("#input_op_interface");

        var return_info_btn = $("#return_info");
        var submit_modify = $("#submit_modify");
        var products = false
        var id ;

        /*业务线主机展示*/
        var hostlist = $("#hostlist");

        /*获取业务线信息并渲染*/
        function show_product_info(){
            infomatioin_div.hide();
            modify_div.hide();
            $.get("/server/product_manage_get/", {"id": id}, function(res){
                if(res.status == 0){
                    data = res.data
                    console.log(data)
                    infomatioin_div.fadeIn("fast");
                    info_name.text(data.name);
                    info_pid.text(data.pid);
                    info_module_letter.text(data.module_letter);
                    info_dev_interface.text(data.dev_interface);
                    info_op_interface.text(data.op_interface);
                }else{
                    swal('错误',res.errmsg,"error");
                }

            });
        }

        /*获取业务线的主机信息，并渲染*/
        function show_hostlist(){
            $.get("/server/get_server/", {"server_purpose": id}, function(res){
                $.each(res, function(n, obj){
                    hostlist.append("<li>"+obj.fields.hostname+"（"+obj.fields.inner_ip+"）</li>");
                });
                hostlist.fadeIn("fast");
            })
        }

  
       /* 点击树结构触发的事件，即获取到每个节点，也就是一二级业务线的id */
       function zTreeOnClick(event, treeId, treeNode) {
            id = treeNode.id ;
            show_product_info()
            hostlist.hide().empty();
            if (treeNode.pid != 0){
                show_hostlist();
            }
        };

        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            callback:{
                onClick: zTreeOnClick
            },
            view: {
                fontCss : {fontSize:"16px"}
            }
        };



        /*获取后端ztree数据*/
        var zNodes = {{ ztree|safe }};
        var zTreeObj;

        $(function(){
            // 初始化渲染ztree数据
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            
            var users = ""
            $.get("/user/userlistapi/", function(res){
                users = res 
                console.log(users)
            }); 


            // 点击修改按钮
            info_modify_btn.click(function(){

                infomatioin_div.hide();
                modify_div.fadeIn("fast");

                input_name.val(data.name);
                input_pid.val(data.pid);
                input_module_letter.val(data.module_letter);
                var selected_dev_name = data.dev_interface.split(",")
                input_dev_interface.empty().chosen("destroy");
                var selected_op_name = data.op_interface.split(",")
                input_op_interface.empty().chosen("destroy");

 
                $.each(users, function(n, obj){
                    console.log(obj)
                    var op_option;
                    var dev_option;
                    if ($.inArray(obj.fields.username, selected_op_name) >= 0){ 
                        op_option = '<option value="'+obj.fields.username+'" selected>';
                    }else{
                        op_option = '<option value="'+obj.fields.username+'">';
                    }   
                    op_option += obj.fields.username+'</option>';
                    input_op_interface.append(op_option);

                    if ($.inArray(obj.fields.username, selected_dev_name) >= 0){ 
                        dev_option = '<option value="'+obj.fields.username+'" selected>';
                    }else{
                        dev_option = '<option value="'+obj.fields.username+'">';
                    }   
                    dev_option += obj.fields.username+'</option>';
                    input_dev_interface.append(dev_option)


                });

                input_op_interface.chosen({disable_search_threshold: 10,
                                    no_results_text: "没有找到对应的记录"});
                input_dev_interface.chosen({disable_search_threshold: 10,
                                    no_results_text: "没有找到对应的记录"});
            });

            // 点击返回
            return_info_btn.click(function(){
                modify_div.hide();
                infomatioin_div.fadeIn("fast");
                return false
            });
            // 点击修改
            submit_modify.click(function(){
                var modify_data = {
                    "id": data.id,
                    "name": input_name.val(),
                    "module_letter": input_module_letter.val(),
                    "dev_interface": input_dev_interface.val(),
                    "op_interface": input_op_interface.val()
                };
                console.log(modify_data)
                $.post("#", modify_data, function(res){
                    if (res.status == 0){
                        swal({
                            title: "操作成功",
                            text:"",
                            type: "success"
                        },function(){
                           show_product_info()
                        })

                    }else{
                        swal('错误',res.errmsg,"error");
                    }
                });
                return false
            });

            $(".chosen-select").chosen({disable_search_threshold: 10,
                                    no_results_text: "没有找到对应的记录"});
        })

    </script>

{% endblock %}
